<template>
  <div class="wdp-process-sidebar">
    <ul>
      <li v-for="menu in menus" :class="$route.fullPath == menu.path ? 'active' : ''">
        <a href="javascript:void(0);" @click="toPage(menu.path)">
          <ych-icon type="folder"/>
          {{menu.meta.title}}
        </a>
      </li>
    </ul>
  </div>
</template>

<script>

  export default {
    name: 'AppSideMenu',
    props: {
      menus: {
        type: Array,
        default: () => []
      }
    },
    methods: {
      toPage (path) {
        if (this.$route.fullPath != path) {
          this.$router.push(path).catch(err => {})
        }
      }
    },
    created () {
      const current = this.menus.find(menu => menu.path == this.$route.fullPath)
      if (!current && this.menus.length > 0) {
        this.$router.push(this.menus[0].path).catch(err => {})
      }
    }
  }
</script>
<style lang="less" scoped>

  .wdp-process-sidebar {
    background: #fff;
    padding: 0;
    height: calc(100vh - 50px);
    overflow: scroll;
    margin: 0;
    width: 100%;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
  }

  .wdp-process-sidebar ul {
    padding: 0px;
    margin: 0px;
  }

  .wdp-process-sidebar ul li {
    list-style: none;
    line-height: 3rem;
    border-left: solid 4px #f8f9fa;
    padding-left: 15px;
  }

  .wdp-process-sidebar ul li a {
    color: #777;
  }

  .wdp-process-sidebar ul li.active {
    background: #f8f9fa;
    border-left: solid 4px #5585f0;
  }

  .wdp-process-sidebar ul li:hover {
    background: #f8f9fa;
    border-left: solid 4px #5585f0;
  }

  .wdp-process-sidebar ul li.active a {
    color: #5585f0;
  }

  .wdp-process-sidebar ul li:hover a {
    color: #5585f0;
  }

  .wdp-process-sidebar ul li i {
    margin-right: 15px;
  }

</style>
